<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类数据列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-button
      type="primary"
      plain
      @click="addCategory"
      style="margin-bottom: 20px"
      >添加分类</el-button
    >

    <el-table
      :data="categoriesList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="cat_id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- <el-table-column type="expand"></el-table-column> -->
      <el-table-column prop="cat_id" label="分类 ID" > </el-table-column>
      <el-table-column prop="cat_name" label="分类名称" align="center"> </el-table-column>
      <el-table-column prop="cat_level" label="分类当前层级" align="center"> </el-table-column>
      <el-table-column prop="cat_deleted" label="是否有效" align="center">
        
        <template slot-scope="scope">
         <!--  <el-switch
            v-model="scope.row.cat_deleted"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch> -->
          <i class="el-icon-success" style="color: #67C23A; font-size: 20px" v-if="scope.row.cat_deleted == false"></i>
          <i class="el-icon-error" style="color: #F56C6C; font-size: 20px" v-else></i>
        </template>
      </el-table-column>
      <el-table-column prop="caozuo" label="操作" align="center">
        <template slot-scope="scope">
          <el-tooltip placement="top">
            <div slot="content">编辑按钮</div>
            <el-button size="normal" @click="handleEdit(scope.row)"
              >Edit</el-button
            >
          </el-tooltip>

          <el-tooltip placement="top">
            <div slot="content">删除按钮</div>
            <el-button
              size="normal"
              type="danger"
              @click="handleDelete(scope.row)"
              >Delete</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getCategoriesList.pagenum"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="getCategoriesList.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="添加分类" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm" ref="addForm">
        <el-form-item label="分类名称" prop="cat_pid">
          <el-input v-model="addForm.cat_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类层级选择">
          <el-cascader
            :options="options"
            v-model="selectedOptions"
            :props="props"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="CancleAddCategory">取 消</el-button>
        <el-button type="primary" @click="addCateSubmit(addForm)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="修改分类" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="分类ID" prop="cat_pid">
          <el-input
            v-model="editForm.cat_id"
            auto-complete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editForm.cat_name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCateSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getCategories,
  addCategories,
  editCategories,
  deleteCategories,
  getMenu
} from "../../api/index";

export default {
  data() {
    return {
      total: 0,
      categoriesList: [],
      getCategoriesList: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },

      // 添加分类
      addDialogFormVisible: false,
      addForm: {
        cat_name: ""
      },
      // 级联选择器的数据源
      options: [],

      // 级联选择器选中后的数据
      selectedOptions: [],
      // props表示配置级联选择器展示的数据字段
      props: {
        value: "cat_id",
        label: "cat_name",

        checkStrictly: true
      },

      // 修改分类
      editDialogFormVisible: false,
      editForm: {
        cat_id: "",
        cat_name: ""
      }
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  beforeMount() {
    this.initGetCategories();
  },
  methods: {
    CancleAddCategory() {
      this.addDialogFormVisible = false;
      console.log(this.selectedOptions);
      this.selectedOptions = [];
      this.addForm.cat_name = "";
      this.addForm.cat_pid = "";
      this.addForm.cat_level = "";
    },

    async initGetCategories() {
      let { data, meta } = await getCategories(this.getCategoriesList);
      if (meta.status !== 200) return this.$message.error("获取失败");
      //   console.log(data);
      this.categoriesList = data.result;
      this.total = data.total;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getCategoriesList.pagesize = val;
      this.initGetCategories();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getCategoriesList.pagenum = val;
      this.initGetCategories();
    },
    handleEdit(row) {
      this.editDialogFormVisible = false;
      this.editDialogFormVisible = true;
      this.editForm.cat_id = row.cat_id;
      this.editForm.cat_name = row.cat_name;

      console.log(row);
    },

    handleDelete(row) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          console.log(row);
          let { data, meta } = await deleteCategories({ id: row.cat_id });

          if (meta.status === 200) {
            this.$message.success("删除成功");
            this.$nextTick(() => {
              this.initGetCategories();
            });
          } else {
            this.$message.error(meta.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    async addCategory() {
      let { data, meta } = await getCategories({ type: 2 });
      this.addDialogFormVisible = true;
      this.options = data;
      console.log(data);
    },

    async addCateSubmit() {
      if (!this.addForm.cat_name) return this.$message.error("数据不能为空");
      let parmas = {
        cat_pid: this.selectedOptions[this.selectedOptions.length-1] || 0,
        cat_name: this.addForm.cat_name,
        cat_level: this.selectedOptions.length || 0
      };

      let { data, meta } = await addCategories(parmas);
      console.log(meta);
      console.log(data);

      if (meta.status === 201) {
        this.$message.success("创建成功");
        this.addDialogFormVisible = false;
        this.addForm.cat_pid = "";
        this.addForm.cat_name = "";
        this.addForm.cat_level = "";

        this.$nextTick(() => {
          this.initGetCategories();
        });
      } else {
        this.$message.error(meta.msg);
      }
    },

    async editCateSubmit() {
      if (!this.editForm.cat_name) return this.$message.error("数据不能为空");
      let { data, meta } = await editCategories(this.editForm);

      if (meta.status === 200) {
        this.$message.success("修改成功");
        this.editDialogFormVisible = false;
        this.$nextTick(() => {
          this.initGetCategories();
        });
      } else {
        this.$message.error(meta.msg);
      }
    }
  },
  filters: {}
};
</script>

<style scoped lang="css"></style>
